<template>
  <div>
    <!-- 基本设置 -->
    <div class="form_section margin_b30">
      <div class="section_title margin_b20">基本设置</div>
      <div class="info_list">
        <el-row>
          <el-col :span="12">
            <div class="info_item">
              <span class="info_label">项目标题：</span>
              <span class="info_value">{{ form.title || '--' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="info_item">
              <span class="info_label">申报开始时间：</span>
              <span class="info_value">{{ form.begin_time || '--' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info_item">
              <span class="info_label">申报结束时间：</span>
              <span class="info_value">{{ form.end_time || '--' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="info_item">
              <span class="info_label">评委打分开始时间：</span>
              <span class="info_value">{{ form.pw_df_begin_time || '--' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info_item">
              <span class="info_label">评委打分结束时间：</span>
              <span class="info_value">{{ form.pw_df_end_time || '--' }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 规则设置 -->
    <div class="form_section margin_b30">
      <div class="section_title margin_b20">规则设置</div>
      <div class="info_list">
        <el-row :gutter="20">
          <el-col :span="10">
            <div class="info_item">
              <span class="info_label">题库模板：</span>
              <span class="info_value">{{ getQuestionTemplateName() || '--' }}</span>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="info_item">
              <span class="info_label">基础权重分：</span>
              <span class="info_value">{{ form.base_weight !== null && form.base_weight !== undefined ? form.base_weight + '%' : '--' }}</span>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="info_item">
              <span class="info_label">评委权重分：</span>
              <span class="info_value">{{ form.judge_weight !== null && form.judge_weight !== undefined ? form.judge_weight + '%' : '--' }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 附件 -->
    <div class="form_section margin_b30">
      <div class="section_title margin_b20">附件</div>
      <div class="attachment_list margin_b20">
        <div
          v-for="(file, index) in attachmentList"
          :key="index"
          class="attachment_item flex_ac margin_b10"
        >
          <i
            :class="getFileIcon(file.file_name)"
            class="file_icon margin_r10"
            :style="{color: getFileIconColor(file.file_name)}"
          ></i>
          <span class="file_name flex1" :title="file.file_name">{{ file.file_name }}</span>
          <span class="file_size margin_r10">{{ formatFileSize(file.file_size) }}</span>
          <a
            v-if="file.file_url"
            :href="file.file_url"
            target="_blank"
            class="margin_l10"
            style="color: #409EFF; text-decoration: none;"
          >
            <i class="el-icon-download"></i> 下载
          </a>
        </div>
        <div v-if="!attachmentList || attachmentList.length === 0" class="empty_text">
          暂无附件
        </div>
      </div>
    </div>

    <!-- 项目描述 -->
    <div class="form_section margin_b30">
      <div class="section_title margin_b20">项目描述</div>
      <div class="description_content" v-html="form.description || '暂无描述'"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BasicInfo',
  props: {
    form: {
      type: Object,
      required: true
    },
    questionTemplateOptions: {
      type: Array,
      default: () => []
    },
    attachmentList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    /** 获取题库模板名称 */
    getQuestionTemplateName() {
      const templateId = this.form.question_template_id || this.form.q_id;
      if (!templateId) return '';
      const template = this.questionTemplateOptions.find(item => item.id == templateId);
      return template ? template.title : '';
    },
    getFileIcon(fileName) {
      const ext = fileName.split('.').pop().toLowerCase();
      if (ext === 'pdf') {
        return 'el-icon-document';
      } else if (['doc', 'docx'].includes(ext)) {
        return 'el-icon-document';
      } else if (['xls', 'xlsx'].includes(ext)) {
        return 'el-icon-document';
      } else {
        return 'el-icon-document';
      }
    },
    getFileIconColor(fileName) {
      const ext = fileName.split('.').pop().toLowerCase();
      if (ext === 'pdf') {
        return '#F56C6C';
      } else if (['doc', 'docx'].includes(ext)) {
        return '#409EFF';
      } else if (['xls', 'xlsx'].includes(ext)) {
        return '#67C23A';
      } else {
        return '#909399';
      }
    },
    formatFileSize(size) {
      if (!size) return '0B';
      const unit = ['B', 'KB', 'MB', 'GB'];
      let index = 0;
      while (size >= 1024 && index < unit.length - 1) {
        size = size / 1024;
        index++;
      }
      return size.toFixed(1) + unit[index];
    }
  }
}
</script>

<style scoped>
.form_section {
  border-bottom: 1px solid #EBEEF5;
  padding-bottom: 20px;
}

.section_title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.info_list {
  padding: 10px 0;
}

.info_item {
  padding: 12px 0;
  line-height: 1.8;
}

.info_label {
  display: inline-block;
  width: 150px;
  color: #606266;
  font-weight: 500;
}

.info_value {
  color: #303133;
}

.attachment_list {
  min-height: 50px;
}

.attachment_item {
  padding: 10px;
  background: #F5F7FA;
  border-radius: 4px;
  border: 1px solid #EBEEF5;
}

.file_icon {
  font-size: 24px;
}

.file_name {
  font-size: 14px;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file_size {
  font-size: 12px;
  color: #909399;
}

.empty_text {
  color: #909399;
  text-align: center;
  padding: 20px 0;
}

.description_content {
  padding: 15px;
  background: #F5F7FA;
  border-radius: 4px;
  border: 1px solid #EBEEF5;
  min-height: 100px;
  color: #303133;
  line-height: 1.6;
}

.description_content >>> img {
  max-width: 100%;
  height: auto;
}
</style>
